<template>
  <div class="wlist" v-if="addresslist.length>0">
    <div
      :class="{'item':true,ac:oIndex===i}"
      v-for="(item,i) in addresslist"
      :key="i"
      @click="clicki(item,i)"
    >
      <div class="top">
        <div class="name">姓名:{{item.name}}</div>
        <div class="phone">电话:{{item.phone}}</div>
      </div>
      <div class="foot">
        <div class="address">地址:{{item.address}}</div>
        <div class="housenum">
          门牌号:{{item.housenum}}
          <span class="redact">
            <img src="../../../assets/bj.png" alt @click="goto(item)" />
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="wdlist" v-else>还没有地址</div>
</template>

<script>
/* 注入vuex方法 */
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      /* 点击地址初始下标 */
      oIndex: 0
    };
  },
  /* 解构地址列表 */
  computed: { ...mapState(["addresslist"]) },
  methods: {
    /* 保存点击项的地址 */
    ...mapMutations(["clicksave"]),
    goto(item) {
      /* 点击编辑时跳转并把数据传过去 */
      this.$router.push({
        name: "redactaddress",
        query: { id: item.id, item }
      });
    },
    /* 点击更改下标，保存数据 */
    clicki(item, i) {
      this.oIndex = i;
      this.clicksave(item);
    }
  }
};
</script>

<style>
</style>